<template>
  <div ref="pageDom" class="all-in-one-page">
    <transition name="fade">
      <div class="ModelPanel">
        <ModelPanel></ModelPanel>
      </div>
    </transition>
    <div class="nvmList">
      <div @click="activeKey = item.key" v-for="item in nvmList" class="nav-item " :class="[activeKey === item.key && 'active']">
        {{ item.name }}
      </div>
    </div>
    <div class="warp-box">
      <div class="w-100 h-100 z-5 left-panel mt-[50px]">
        <shui-chang-gong-yi />
      </div>
    </div>
  </div>
</template>
<!--工艺总图-->
<script setup>
import { onMounted, ref } from 'vue'
import ModelPanel from '@/views/Technology/ZuTai/index.vue'
import ShuiChangGongYi from './panel/水厂工艺/index.vue'

const nvmList = [
  {
    name: '全部',
    key: 'all',
    value: 'all'
  },
  {
    name: '清水池',
    key: '清水池',
    value: '清水池'
  },
  {
    name: '原水池',
    key: '原水池',
    value: '原水池'
  },
  {
    name: '脱水机房',
    key: '脱水机房',
    value: '脱水机房'
  },
  {
    name: '鼓风机房',
    key: '鼓风机房',
    value: '鼓风机房'
  },
  {
    name: '综合加药间',
    key: '综合加药间',
    value: '综合加药间'
  },
  {
    name: '原水提升泵房',
    key: '原水提升泵房',
    value: '原水提升泵房'
  },
  {
    name: '常规处理车间',
    key: '常规处理车间',
    value: '常规处理车间'
  },
  {
    name: '污泥浓缩车间',
    key: '污泥浓缩车间',
    value: '污泥浓缩车间'
  },
  {
    name: '吸水井及二级泵房',
    key: '吸水井及二级泵房',
    value: '吸水井及二级泵房'
  },
  {
    name: '栅格及预臭氧接触池',
    key: '栅格及预臭氧接触池',
    value: '栅格及预臭氧接触池'
  },
  {
    name: '臭氧发生器间下叠排泥池',
    key: '臭氧发生器间下叠排泥池',
    value: '臭氧发生器间下叠排泥池'
  }
]
const activeKey = ref('all')
// 每个页面都需要引入的
import { usePageFade } from '@/utils/usePageFade.js'

const { pageDom } = usePageFade()
// 组件挂载完成后执行的钩子函数
onMounted(() => {
  // 这里可以添加组件挂载后需要执行的代码
  console.log('组件挂载完成')
})
</script>

<style lang="scss" scoped>
@import '@/assets/panel.common.css';

.all-in-one-page {
  overflow: hidden;
  display: flex;
  height: 100%;
  width: 100%;
}

.warp-box {
  width: 100%;
  left: 0;
  position: absolute;
  height: 100%;
  pointer-events: none;
  padding-top: 107px;
}

.ModelPanel {
  width: 100%;
  position: relative;
  height: 100%;
}

.nvmList {
  width: 1394px;
  position: absolute;
  top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  left: 50%;
  height: 46px;
  background-image: url('./images/navBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateX(-50%);

  .nav-item {
    white-space: nowrap;
    margin: 0 11px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 18px;
    -webkit-background-clip: text;
    position: relative;
    line-height: 1;
    cursor: pointer;
    background: linear-gradient(180deg, #ffffff, #2b94ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    &:hover {
      background: linear-gradient(180deg, #ffffff,#FFBB00);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    &:last-child {
      &:after {
        content: '';
        display: none;
      }
    }

    &:after {
      content: '';
      display: inline-block;
      width: 1px;
      height: 24px;
      background-color: #2b94ff;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: -11px;
    }
  }
  .active{
    background: linear-gradient(180deg, #ffffff,#FFBB00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    &:before {
      content: '';
      display: inline-block;
      width: 34px;
      height: 2px;
      background: linear-gradient( 270deg, rgba(255,207,74,0) 2%, #FFBB00 56%, rgba(255,207,74,0) 100%);
      border-radius: 0px 0px 0px 0px;
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
